<template>
    <div class="container">
        <div class="navBarContainer">
            <div class="navBar">
                <div
                    class="barItem"
                    :class="index == activeNum ? 'active' : ''"
                    v-for="(item, index) in navBarItem"
                    :key="index"
                    @click="clickBarItem(item.path, index)"
                >{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "NavBar",
    data() {
        return {
            activeNum: 0//用于存放navBarItem下标
        };
    },
    props: {
        navBarItem: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    methods: {
        clickBarItem(path, index) {
            if (this.activeNum == index) {
                return;
            }
            console.log(path, index);
            this.activeNum = index;
            this.$emit("clickBarItem", path);
        },
    },
};
</script>

<style scoped>
.barItem {
    position: relative;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-right: 34px;
    font-weight: 300;
    color: #333;
}

.active {
    font-size: 16px;
    color: black;
    font-weight: 600;
    padding-bottom: 5px;
    /* border-bottom: 3px solid #ec4141; */
    transform: scale(1.2);
    transition: transform 1s;
}
.active:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 6px;
    background: #ffe443;
    z-index: -1;
}
.navBarContainer {
    padding-left: 192px;
    height: 54px;
    line-height: 54px;
}
</style>
